<template>
  <div class="home contanier">
    <p>store count: {{ $store.state.count }}</p>
    <button @click="changeCount">修改count</button>
    <h1>首页组件</h1>
    <p>姓名：{{ name }}，年龄: {{ age }}</p>
    <hr />
    <hello-word @set-data="getData" name="小王" :users="[1, 2, 3]"></hello-word>
    <img class="logo" src="@assets/1.png" alt="" />
    <button @click="loadData">蓝铅笔</button>
    <a href="#">兰洽比</a>
    <div class="test">
      <div>
        <a href="#">哈哈哈</a>
      </div>
    </div>
    <button @click="goToList">前进</button>
    <router-link to="/my111">前进</router-link>
    <router-link to="/course456?id=101&a=100&b=200">课程详情</router-link>
    <!-- 路由传参：可以使用query，参数会拼接到路由的后面 -->
    <!-- <router-link :to="{ name: 'course', query: { a: 100, b: 2000 } }"
      >课程详情</router-link
    > -->
    <hr />
    <router-link to="/course/200/小明">课程详情</router-link>
    <!-- <router-link
      :to="{
        name: 'course1',
        params: {
          idss: 10,
          name: 20,
        },
      }"
      >课程详情</router-link
    > -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
// @是一种简写方式，直接代表src目录，在@(src)目录下查找资源
// import HelloWord from "@/components/HelloWord";
import request from "@utils/request.js";

// 使用vue的异步组件，导入组件，当前父组件使用了<hello-word />子组件，vue才开始编译这个组件，当前父组件没有使用<hello-word />，该组件就不会被打包，也可以减少包的体积。
const HelloWord = () => import("@/components/HelloWord");

export default {
  name: "homeView",
  data() {
    return {
      name: "小明",
      age: 0,
    };
  },
  created() {
    // console.log(this.$route);
  },
  methods: {
    getData(data) {
      this.age = data;
      request();
    },
    loadData() {
      fetch("/lqb/api/home/banner?type=m&local_code=10&limit=6&order=weight")
        .then(resp => resp.json())
        .then(data => {
          console.log(data);
        });
    },
    goToList() {
      // this.$router: 是Vue Router的实例对象，它主要是进行页面切换的对象。通过它可以前进、后退，实现类似于window.history的功能。
      this.$router.push({
        name: "my", // 命名路由跳转
        query: {
          a: 1000,
          b: 2000,
        },
      });
    },
    changeCount() {
      // this.$store.state.count = 100; 错误写法
      this.$store.commit("setCount", 100);
    },
  },
  components: {
    HelloWord,
  },
};
</script>

<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@import "@assets/content";
$border-width: 5px;
// scoped: 开启样式局部作用域，这里写的样式只针对当前组件，其它组件不生效
h1 {
  font-size: 30px;
}
.logo {
  @include flex-between;
  width: 100px;
  height: 100px;
}
a {
  border: $border-width solid blue;
}
.test {
  @include flex-center;
  div {
    @import "@assets/content";
  }
}
</style>
